<template>
  <div>
    <div >
      <div style="background-image: url('https://static3.sycdn.imooc.com/static/img/u/temp1.png');height: 200px;width: 100%">
        <div class="w course_infos">
          <div class="course-title">
            <h2>{{course.title}}</h2>
          </div>
          <div class="statics">
            <div class="teacher-info l">
              <el-avatar size="large" :src="course.imageUrl" class="tou"></el-avatar>
              <span class="teacher-name">{{course.nickname}}</span>
              <span class="teacher-job">{{course.office}}</span>
            </div>
            <div class="static-item l">
              <span class="title">难度</span>
              <span v-if="course.difficulty == 1">入门</span>
              <span v-else-if="course.difficulty == 2">初级</span>
              <span v-else-if="course.difficulty == 3">中级</span>
              <span v-else>高级</span>
              <i></i>
            </div>
            <div class="static-item l">
              <span class="title">时长</span>
              <span>{{parseInt(course.duration/3600)==0?'':parseInt(course.duration/3600)+'小时'}}{{course.duratio%3600==0?'':parseInt(course.duration%3600/60)+'分钟'}}</span>
            </div>
            <div class="static-item l">
              <span class="title">学习人数</span>
              <span>{{course.number}}</span>
            </div>
            <div class="static-item l score">
              <span class="title">评分</span>
              <el-tooltip effect="dark" placement="top">
                <div slot="content">评分人数：{{course.rateNumber}}人 </div>
                <span style="cursor: pointer">{{course.overallRate}}</span>
              </el-tooltip>
            </div>
          </div>
        </div>
      </div>
      <!--导航菜单-->
      <div class="course-info-menu">
        <div class="w ">
        <el-menu
          :default-active="$route.fullPath"
          class="CourseNavMenu"
          router
          mode="horizontal"
          @select="navMenuSelect"
          :collapse="false"
        >
          <el-menu-item v-for="item in menuList" :key="item.menu_id" :index="item.url" :route="item.route"  class="item_div" >
        <span>
            {{item.name}}
          </span>
          </el-menu-item>
        </el-menu>
      </div>
      </div>
      <!--课程主要展示-->
      <div class="course-info-main w">
        <div class="content">
          <router-view :courseId="courseId" :isStudy="isStudy"></router-view>
        </div>
        <div class="aside" >
          <div class="course-warp"  style="text-align: left">
            <div class="studyDetailDiv" v-if="isStudy">
              <div style="margin-bottom: 10px;font-weight: bolder">
                <span >已学习：{{studyPre}}%</span>
              </div>
              <el-progress  :stroke-width="14" :percentage="studyPre" :show-text="false"></el-progress>
              <div style="margin-top: 10px;font-size: 14px; color: gray">
                上次学至：{{studyData.sectionName}}
              </div>
            </div>
            <div class="learn-button">
              <el-button type="success studyBtn" v-if="!isStudy" @click="startLearn" round>开始学习</el-button>
              <el-button type="success studyBtn" @click="learnCourseFun" v-else round>继续学习</el-button>
            </div>
            <div style="margin-top: 20px">
              <div class="course-detail-index">
                <span >课程须知</span>
              </div>
              <div class="course-detail-last">
                <span >{{course.notice}}</span>
              </div>
            </div>
            <div style="margin-top: 10px">
              <div  class="course-detail-index">
                <span>老师告诉你能学到什么？</span>
              </div>
              <div  class="course-detail-last">
                <span>{{course.teacherNotice}}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {mapState} from 'vuex'

export default {
  name: 'CourseDetail',
  data () {
    return {
      courseId: this.$route.query.courseId,
      nCourseId: '',
      course: '',
      studyData: '',
      isStudy: false,
      studyPre: 0,
      indexSectionId: '',
      menuList: [
        {
          menu_id: '1',
          name: '课程章节',
          url: '/learn/courseCs?courseId=' + this.$route.query.courseId
        },
        {
          menu_id: '2',
          name: '问答评论',
          url: '/learn/courseQC?courseId=' + this.$route.query.courseId
        },
        {
          menu_id: '3',
          name: '同学笔记',
          url: '/learn/courseNote?courseId=' + this.$route.query.courseId
        },
        {
          menu_id: '4',
          name: '用户评价',
          url: '/learn/courseEv?courseId=' + this.$route.query.courseId
        }
      ]
    }
  },
  mounted () {
    this.getCourseDetail()
    this.getStudyDetail()
    this.getIndexSectionId()
  },
  beforeCreate () {
    this.nCourseId = this.courseId
  },
  computed: {
    newCourseId: function () {
      return this.courseId
    },
    ...mapState({user: 'user'})
  },
  methods: {
    navMenuSelect () {},
    getCourseDetail () {
      var _this = this
      this.$axios.post('/api/course/getCourseDetail',
        this.$qs.stringify({
          'courseId': _this.courseId
        }))
        .then(function (response) {
          var data = response.data
          if (data.isSuccess) {
            _this.course = JSON.parse(JSON.stringify(data.result))
          }
        })
    },
    getStudyDetail () {
      var _this = this
      this.$axios.post('/api/study/getStudyDetail',
        this.$qs.stringify({
          'queryData': JSON.stringify({
            'courseId': _this.courseId,
            'userId': _this.user.userId
          })
        }))
        .then(function (response) {
          var data = response.data
          if (data.isSuccess) {
            if (JSON.parse(JSON.stringify(data.result)) != null) {
              _this.isStudy = true
              _this.studyData = JSON.parse(JSON.stringify(data.result))
              _this.studyPre = parseInt(_this.studyData.scount / _this.studyData.total * 100)
            }
          }
        })
    },
    learnCourseFun () {
      this.$router.push(
        {path: '/video',
          query: {
            sectionId: this.studyData.lastSectionId,
            courseId: this.courseId,
            path: this.$route.fullPath
          }
        }
      )
    },
    startLearn () {
      var _this = this
      var studyData = {}
      studyData.userId = this.user.userId
      studyData.courseId = this.course.courseId
      this.$axios.post('/api/study/addStudy',
        this.$qs.stringify({
          studyData: JSON.stringify(studyData),
          sectionId: this.indexSectionId
        })
      ).then(function (response) {
        var data = response.data
        if (data.isSuccess) {
          _this.$router.push(
            {path: '/video',
              query: {
                sectionId: _this.indexSectionId,
                courseId: _this.courseId,
                path: _this.$route.fullPath
              }
            }
          )
        }
      })
    },
    getIndexSectionId () {
      var _this = this
      this.$axios.post('/api/section/getIndexSectionId',
        this.$qs.stringify({
          courseId: this.courseId
        })
      ).then(function (response) {
        var data = response.data
        if (data.isSuccess) {
          _this.indexSectionId = data.result.sectionId
        }
      })
    }
  }
}
</script>

<style>
  body {
    overflow: auto !important;
  }
  .studyBtn{
    width: 100%;
    height: 46px;
    font-size: 20px
  }
.course_infos{
  height: 200px;
  text-align: left;
}
.course_infos .course-title h2{
  padding-top: 64px;
  position: relative;
  z-index: 1;
  margin-top: 0px;
  margin-bottom: 8px;
  line-height: 48px;
  font-size: 32px;
  color: #fff;
}
.course-info-menu {
  height: 68px;
  line-height: 68px;
  background: #fff;
  box-shadow: 0 4px 8px 0 rgba(28, 31, 33, .1);
}
  .w {
    width:1200px;
    margin:0px auto;
  }
  .course-info-main .content{
    display: inline-block;
    float: left;
    width: 800px;
    padding-top: 30px;
  }
  .course-info-main .aside {
    display: inline-block;
    float: right;
    margin-top: -148px;
    position: relative;
    width: 370px;
    margin-left: 30px;
  }
  .course-info-main .aside .course-detail-index {
    margin-bottom: 6px;
    font-weight: 700;
    font-size: 14px;
  }
  .course-info-main .aside .course-detail-last {
    font-size: 12px;
    line-height: 24px;
    color: #545c63;
    white-space: pre-line;
   }
  .course-info-main .course-warp {
    margin-bottom: 8px;
    padding: 24px 32px 32px;
    background: #fff;
    box-shadow: 0 8px 16px 0 rgba(7,17,27,.1);
    border-radius: 12px;
  }
  .statics {
    color: #fff;
    font-size: 0;
    position: relative;
    z-index: 3;
    margin-right: 320px;
    height: 40px;
  }
  .l {
    float: left;
  }
  .statics .teacher-info {
    position: relative;
    padding-left: 56px;
    padding-right: 60px;
    line-height: 12px;
    font-size: 12px;
    text-align: left;
  }
  .teacher-info .tou {
    float: left;
    margin-left: -56px;
  }
  .teacher-name {
    display: block;
    font-size: 12px;
    margin-top: 3px;
    line-height: 20px;
  }
  .teacher-job {
    display: block;
    font-size: 12px;
    line-height: 20px;
  }
  .statics .static-item {
    display: inline-block;
    position: relative;
    margin-right: 16px;
    font-size: 12px;
    top: 15px;
  }
  .statics .static-item:after {
    margin-left: 16px;
    content: "·";
   }
  .statics .static-item .title{
    padding-right: 8px;
    line-height: 12px;
    font-size: 12px;
    font-weight: 700;
  }
  .statics .score:after {
    content: '';
  }
  .studyDetailDiv {
    padding-bottom: 20px;
  }
</style>
